import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, Image, ActivityIndicator} from 'react-native';
import Carousel from "react-native-carousel-control";

export default class extends PureComponent {
    pageChange = (idx) => {
        this.props.setCurrentIndex(idx);
    };

    render() {
        const {shareImgList} = this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.topText}>分享专属海报，新用户可免邀请码注册，关系自动绑定</Text>
                <View style={styles.imgWrap}>
                    {
                        shareImgList.length ?
                            <Carousel pageWidth={250} onPageChange={this.pageChange}>
                                {
                                    shareImgList.map(item => {
                                        return <Image key={item} source={{uri: item}} style={styles.img}
                                                      resizeMode="stretch"/>;
                                    })
                                }
                            </Carousel> :
                            <ActivityIndicator size="small"/>
                    }
                </View>
                <Text style={styles.bottomText}>新用户扫二维码→下载APP→点击微信登录</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center'
    },
    topText: {
        textAlign: 'center',
        fontSize: 10,
        color: '#c3c3c3',
        paddingTop: 20,
        paddingBottom: 20
    },
    imgWrap: {
        height: 465,
        paddingTop: 10,
        paddingBottom: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    img: {
        width: 250,
        height: 445
    },
    bottomText: {
        fontSize: 13,
        color: '#828181',
        marginTop: 26
    }
});
